import { Component } from 'react'
import { Provider } from 'mobx-react'
import store from '@/mbox/store'
import Child from './items'
import { Button, Space } from 'antd'

// 通过 Provider 传递 store
class MobxProvider extends Component {
	render() {
		return (
			<Provider store={store}>
				<Space size={10}>
					<Button type="dashed" onClick={() => store.getList()}>
						获取列表
					</Button>
					<Child />
				</Space>
			</Provider>
		)
	}
}
export default MobxProvider

// 方式二
// import { observer } from 'mobx-react'
// @observer
// class MobxObserver extends Component {
// 	componentDidMount() {
// 		store.getList()
// 	}
// 	render() {
// 		const { list } = store
// 		return <Child list={list} />
// 	}
// }
// export default MobxObserver

// import { Component } from 'react'
// class Child extends Component<any, any> {
// 	render() {
// 		const { list } = this.props
// 		return <span>{list.length}</span>
// 	}
// }
// export default Child
